<template>
  <div id="app" class="product-sample-cut">
    <!-- 导航条 -->
    <van-nav-bar left-arrow title="客户退货" @click-left="comeBack" left-text="返回">
      <template #right>
        <span @click="openScanWinFn"><van-icon name="plus" size="20" /></span>
      </template>
    </van-nav-bar>

    <!-- 筛选 -->
    <van-search v-model="queryParam.topNo" placeholder="请输入搜索关键词" @search="refreshPageFn" />
    <van-cell title="入库区域" is-link :value="addParam.area" @click="showAreaPickerPopup"></van-cell>

    <!-- 滚动 -->
    <better-scroll class="public-scroll" :data="customerReturnData" :total-page="totalPage" :pulldown="true" :pullup="true" @pullup="loadNextPageFn" @pulldown="refreshPageFn">
      <div class="data-card" v-for="row in customerReturnData" :key="row.id" style="padding-bottom: 0.5rem">
        <div style="border-bottom: 1px solid #8191c5; font-size: 1.2rem;color: #1677FF;justify-content: space-between">
          <span>{{ row.customer }}</span>
        </div>
        <div style="justify-content: space-between">
          <span style="color: #e6a23c">品名: {{ row.topNo }}</span>
          <span style="color: #e6a23c">颜色: {{ row.color }}</span>
          <span style="color: #e6a23c">匹号: {{ row.designSeqNo }}</span>
        </div>
        <div style="justify-content: space-between;font-size: 1rem; border-top: 1px solid #8191c5">
          <span>{{ row.redoWorkerName }}</span>
          <span>{{ row.redoAt }}</span>
        </div>
      </div>
    </better-scroll>

    <!-- 区域picker -->
    <van-popup v-model="showAreaPicker" position="bottom">
      <van-picker show-toolbar :columns="areaColumns" @confirm="confirmArea" @cancel="showAreaPicker = false"></van-picker>
    </van-popup>

    <!-- 确认操作 -->
    <van-popup v-model="addParam.show" style="width: 60vw;" :close-on-click-overlay="false">
      <van-cell title="品名" :value="addParam.topNo"></van-cell>
      <van-cell title="颜色" :value="addParam.color"></van-cell>
      <van-cell title="匹号" :value="addParam.designSeqNo"></van-cell>
      <van-cell title="米数" :value="addParam.length"></van-cell>
      <van-cell title="实退米数">
        <template #default>
          <van-field v-model="addParam.actualLength" clearable></van-field>
        </template>
      </van-cell>
      <div style="margin-top:2vh; margin-bottom: 2vh; display: flex; justify-content: center;">
        <van-button type="danger" size="small" @click="addParam.show=false">取消</van-button>
        <van-button type="primary" size="small" style="margin-left: 5vw;" @click="customerReturnFn">确认</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import {comeBack} from "@/utils";
import {clothNoteDetail, customerReturn, loadCustomerReturnData} from "@/api/product";
import {getByType} from "@/api/yarn";
import {SPLIT_BLANK} from "@/api/enum";

export default {
  name: "productCustomerReturn",
  data() {
    return {
      /* 查询 */
      queryParam: {
        topNo: "",
        pageNum: 1,
        pageSize: 7,
      },

      /* 默认区域 */
      showAreaPicker: false,
      areaColumns: [],

      /* 列表相关 */
      customerReturnData: [],
      totalPage: 0,

      /* 操作相关 */
      addParam: {
        show: false,
        topNo: SPLIT_BLANK,
        color: SPLIT_BLANK,
        designSeqNo: 0,
        length: 0,
        actualLength: 0,
        detailId: SPLIT_BLANK,
        detailFlag: SPLIT_BLANK,
        area: SPLIT_BLANK,
      },

    };
  },
  mounted() {
    const that = this;
    if (process.env.NODE_ENV === "production") {
      that.$nextTick(() => {
        that.initFn(that);
      });
    } else {
      window.apiready = function () {
        that.initFn(that);
      };
    }

    // that.initFn(that);   //dev fixme
  },
  methods: {
    comeBack,

    //初始化
    initFn(that) {
      that.loadCustomerReturnDataFn(1);
      that.initArea();
    },

    //加载退库数据
    loadCustomerReturnDataFn(pageNum) {
      const that = this;
      if(pageNum == 1) {
        that.queryParam.pageNum = pageNum;
      }
      loadCustomerReturnData(that.queryParam, data => {
        that.totalPage = data.totalPage;
        data.list.forEach(row => {
          that.customerReturnData.push(row);
        });
      })
    },

    //刷新
    refreshPageFn() {
      let that = this;
      that.customerReturnData.splice(0, that.customerReturnData.length);
      that.loadCustomerReturnDataFn(1);
    },

    //加载下一页
    loadNextPageFn() {
      let that = this;
      that.queryParam.pageNum++;
      that.loadSampleCutDataFn();
    },

    //初始化区域
    initArea() {
      let that = this;
      getByType({
        pageSize: 1000,
        type: 16
      }, (res) => {
        that.addParam.area = res.list[0].propertyValue;
        res.list.forEach((item) => {
          that.areaColumns.push(item.propertyValue);
        });
      });
    },
    //弹出区域选择框
    showAreaPickerPopup() {
      const that = this;
      that.showAreaPicker = true;
    },
    //确认选中区域
    confirmArea(value) {
      const that = this;
      that.addParam.area = value;
      that.showAreaPicker = false;
    },

    //打开扫码窗口
    openScanWinFn() {
      const that = this;
      that.addParam.detailId = "";
      that.addParam.detailFlag = 0;
      const zyHmsScan = api.require('zyHmsScan');
      zyHmsScan.openDefaultView({}, ret => {
        if(ret.status) {
          let content = ret.result;
          if (content.indexOf("http://") >= 0) {
            content = content.substring(content.lastIndexOf("/")+1, content.length);
          }
          let contents = content.split("?");

          //获取详情
          let params = {};
          params.geryClothId = contents[0];
          if(contents[1]) {
            params.flag = 1;
          }
          clothNoteDetail(params, data => {
            that.addParam.topNo = data.topNo;
            that.addParam.color = data.color;
            that.addParam.designSeqNo = data.designSeqNo;
            that.addParam.length = data.length;
            that.addParam.actualLength = data.length;
            that.addParam.detailId = data.id;
            that.addParam.show = true;
          });
        }
      });
    },

    /* 确认退货 */
    customerReturnFn() {
      const that = this;
      customerReturn(that.addParam, row => {
        that.addParam.show = false;
        that.customerReturnData.splice(0, 0, row);
        that.$toast.success({
          type: "success",
          message: "退货成功,请继续",
          onClose: function () {
            that.openScanWinFn();
          },
          duration: 1500
        })
      });
    }
  },
}
</script>

<style lang="scss">
.product-sample-cut {
  height: 100%;
  .van-search {
    z-index: 1;
  }
  .public-scroll {
    height: 79vh;
    .data-card {
      width: 96vw;
      padding: 0.8rem;
      margin-left: 2vw;
      background-color: white;
      margin-top: 0.5rem;
      box-shadow: 0.3rem 0.5rem 0.3rem #888888;
      div {
        display: flex;
        padding: 0.3rem 0rem;
        span {
          line-height: 1rem;
        }
      }
    }
  }
}
</style>